<!-- 技师——申请提现 -->
<template>
	<view class="apply-withdrawal-page">
		<view class="withdrawal-top flex-column">
			<text>{{ withdrawInfo.withdrawalAmount || 0 }}</text>
			<view class="flex-align-center my-commission-cls">
				<image src="/static/my/my-commission.png"></image>
				<view>我的金额</view>
			</view>
		</view>
		<view class="card-content">
			<view class="v-pop-title">提现金额</view>
			<view class="flex-align-center v-price">
				<!-- <text>￥</text> -->
				<view>￥{{ withdrawInfo.withdrawalAmount || 0 }}</view>
				<!-- <input type="number" v-model="logno" placeholder="输入金额" />
				<view @click="allGET()">全部提现</view> -->
			</view>
			<!-- 技师手术费，由后台计算，因此不需要展示和计算 -->
			<!-- <view class="flex-between p-radio">
				<view class="radio-cls">
					手续费：
					<text>3%</text>
				</view>
				<view class="radio-cls">
					预计到账佣金：
					<text>￥0</text>
				</view>
			</view> -->
			<!-- 支付宝提现，需要有提现账户 -->
			<view class="flex-between tx-account" v-if="enabledNot == 1">
				<text>提现账户</text>
				<view class="flex-end account-msg flex1" @click="toAccount">
					<view>{{ isNew ? '暂无账户，去添加' : accountInfo.accountName }}</view>
					<image mode="heightFix" src="/static/right-arrow.png"></image>
				</view>
			</view>
			<view class="flex-between tx-account" v-else></view>
			<view class="v-pop-title" style="padding-top: 30rpx !important;">提现方式</view>
			<view class="flex-align-center">
				<block v-for="(i, j) in txList" :key="j">
					<view v-if="i.withdrawalMethod!==2&&i.withdrawalMethod!==3" class="flex" :class="typeIndex == j ?typeIndex==0?'type-cls-green': 'type-cls-select' : 'type-cls'" @click="selClick(j)">
						<image :src="typeIndex == j ? i.imgSel : i.img"></image>
						<view>{{ i.text }}</view>
					</view>
				</block>
			</view>
			<view class="v-pop-title">温馨提示</view>
			<rich-parser
				class="color666 p-align38"
				:html="withdrawInfo.warmReminder"
				domain="https://6874-html-foe72-1259071903.tcb.qcloud.la"
				lazy-load
				ref="article"
				selectable
				show-with-animation
				use-anchor
			></rich-parser>
		</view>
		<view class="flex fit-cls"><view :class="enabledNot==2?'sumbit-btn-green flex':'sumbit-btn flex'" @click="applyConfirm">提交申请</view></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			typeIndex: 0,
			txList: [
				{
					img: '/static/my/wx-sel.png',
					imgSel: '/static/my/wx.png',
					text: '微信',
					id: 2
				},
				{
					img: '/static/my/zfb.png',
					imgSel: '/static/my/zfb-sel.png',
					text: '支付宝',
					id: 1
				}
			],
			enabledNot: 2, //提现方式    1 支付宝  2 微信
			withdrawInfo: {}, // 提现信息
			isNew: true, //是否为新增账户，默认位是true，为新增账户
			accountInfo: {} ,//支付宝账户信息,
			withdrawalMethod:''
		};
	},
	onLoad() {
		// 
		this.withdrawalMethod=uni.getStorageSync('withdrawalMethod')
		if(this.withdrawalMethod==3){
			this.txList[1].withdrawalMethod=this.withdrawalMethod
		}else if(this.withdrawalMethod==2){
			this.txList[0].withdrawalMethod=this.withdrawalMethod
			this.enabledNot=1
		}
		
	},
	onShow() {
		// 由于getWithdrawMoney接口，刷新了防抖，所以不需要在onshow，再次调用
		this.getWithdrawMoney();
		this.queryAccount();
	},
	methods: {
		// 跳转"提现账户设置"页面
		toAccount() {
			let url = '/pages/withdrawal/withdrawa-account/withdrawa-account';
			this.$sun.navGo(url);
		},
		// 选择“提现方式”
		selClick(index) {
			this.typeIndex = index;
			this.enabledNot = this.txList[index].id;
			console.log('this.enabledNot', this.enabledNot);
		},
		// 提交申请
		applyConfirm() {
			if (this.withdrawInfo.withdrawalAmount <= 0) {
				this.$sun.toast('提现金额小于0，无法提现！');
				return false;
			}else if(this.withdrawInfo.withdrawalAmount<){
				
			} else {
				// 申请提现
				this.$at.uniDoFunc({
					// 键名
					key: 'submit',
					success: async () => {
						//锁定
						this.$at.lockKey('submit');				
						this.applyWithdrawal();
					}
				});
			}
		},
		// 获取提现金额
		async getWithdrawMoney() {
			const result = await this.$http.post({
				url: this.$api.getWithdrawDate,
				data: {
					siteId: uni.getStorageSync('siteId'), // 站点id
					userId: uni.getStorageSync('userId') //登录用户的id
				}
			});
			if (result.code == 200) {
				console.log('获取提现金额result.', result);
				this.withdrawInfo = result.data;
				this.$at.releaseKey('submit');
			} else {
				console.log('result.message', result.message);
				this.$at.releaseKey('submit');
			}
		},

		// 提现账户查询（可共用）
		async queryAccount() {
			const result = await this.$http.get({
				url: this.$api.getWithdrawalAccount,
				data: {
					userId: uni.getStorageSync('userId') //登录用户的id
				}
			});
			if (result.code == 200) {
				console.log('提现账户查询result.', result, 'result.data', result.data);
				this.isNew = result.data ? false : true;
				if (result.data) {
					this.accountInfo = result.data;
				}
				console.log('this.isNew', this.isNew);
			} else {
				console.log('result.message', result.message);
			}
		},

		// 申请提现
		async applyWithdrawal() {
			let withdrawAccount = this.enabledNot == 1 ? this.accountInfo.accountNumber : '';
			const result = await this.$http.post({
				url: this.$api.technicianWithdrawal,
				data: {
					siteId: uni.getStorageSync('siteId'), // 站点id
					userId: uni.getStorageSync('userId'), //登录用户的id
					enabledNot: this.enabledNot, //提现方式    1 支付宝  2 微信
					withdrawAmount: this.withdrawInfo.withdrawalAmount, //提现金额(默认提现全部佣金)
					withdrawAccount: withdrawAccount //提现账户（支付宝必填）
				}
			});
			if (result.code == 200) {
				this.$sun.toast('申请成功，请等待')
				this.getWithdrawMoney(); //刷新金额
			} else {
				this.$at.releaseKey('submit');
				this.$sun.toast(result.message)
			}
		},

	}
};
</script>

<style lang="less">
	.sumbit-btn {
		height: 100rpx;
		color: #ffffff;
		border-radius: 10px;
		background: #1890ff;
	}
	.sumbit-btn-green{
		height: 100rpx;
		color: #ffffff;
		border-radius: 10px;
		background: #00aa00;
	}
.apply-withdrawal-page {
	.withdrawal-top {
		width: 100%;
		padding: 76rpx 0;
		background: linear-gradient(256deg, #2c7fff 12.04%, #2c7fff 89.24%);
		text {
			color: #fff;
			font-size: 64rpx;
			margin-bottom: 22rpx;
			font-weight: 700;
		}
		.my-commission-cls {
			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}
			view {
				color: #fff;
			}
		}
	}
	.card-content {
		padding-bottom: 250rpx;
		margin-top: -30rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background: #fff;
		.v-pop-title {
			padding: 74rpx 38rpx 44rpx;
			font-size: 32rpx;
		}
		.v-price {
			margin: 0 38rpx 0 30rpx;
			padding: 0rpx 0 18rpx 0;
			border-bottom: 2rpx solid #f7f7f7;

			text {
				font-size: 60rpx;
			}
			view {
				flex: 1;
				font-size: 40rpx;
			}
		}
		.p-radio {
			padding: 40rpx 38rpx 0;
			.radio-cls {
				color: #333;
				text {
					color: #1890ff;
				}
			}
		}
		
		// 提现账户样式
		.tx-account {
			height: 130rpx;
			margin: 0 38rpx;
			text {
				font-size: 32rpx;
				padding-right: 20rpx;
			}
			.account-msg {
				view {
					color: #666;
					margin-right: 6rpx;
				}
				image {
					height: 20rpx;
				}
			}
		}
		.type-cls,
		.type-cls-select {
			margin: 0 16rpx 20rpx 24rpx;
			width: 238rpx;
			height: 100rpx;
			border-radius: 74rpx;
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}
		.type-cls,
		.type-cls-green{
			margin: 0 16rpx 20rpx 24rpx;
			width: 238rpx;
			height: 100rpx;
			border-radius: 74rpx;
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}
		.type-cls-green {
			background: #00aa00;
			view {
				color: #fff;
			}
		}
		.type-cls {
			background: #f5f5f5;
		}
		.type-cls-select {
			background: #1890ff;
			view {
				color: #fff;
			}
		}
		.p-align38 {
			padding: 0 38rpx 60rpx;
		}
	}

	.fit-cls {
		background-color: #fff;
		z-index: 99;
		position: fixed;
		padding: 25rpx 0rpx 100rpx;
		bottom: 0;
		width: 100%;
		view {
			width: 700rpx !important;
		}
	}
}
</style>